<template>
    <Panel>
        <div class="row">
            <div class="col-medium-1-2">
                <div class="panel__title">
                    {{ asset.name }}
                </div>
            </div>
            <div class="col-medium-1-2">
                <div class="meta-tags">
                    <div class="meta-tags__tag">
                        Most Recent Audit - {{ asset_last_audit_date }}
                    </div>
                    <div class="meta-tags__tag">
                        Audit Type - {{ asset.last_audit_type }}
                    </div>
                </div>
            </div>
        </div>

        <table>
            <thead>
            <tr>
                <th>Owner</th>
                <th>Proximity</th>
                <th>ID</th>
                <th>Tax ID</th>
                <th>Mandates</th>
                <th>Maintenance Hist.</th>
                <th>Completeness of Documentation</th>
                <th>Systems</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{ asset.asset_owner }}</td>
                <td>{{ asset.proximity }} Miles</td>
                <td>{{ asset.id }}</td>
                <td>{{ asset.tax_id }}</td>
                <td>{{ asset.mandates }}</td>
                <td>{{ asset_maintenance_length.years }} Years {{ asset_maintenance_length.months }} Months</td>
                <td>{{ asset.documentation_completeness }}%</td>
                <td><router-link :to="{ name: 'AssetSystems', params: { id: asset.id } }">{{ asset.systems.length }}</router-link></td>
            </tr>
            </tbody>
        </table>
    </Panel>
</template>
<script>
    import dateFormat from 'dateformat'
    import Panel from './Panel.vue'

    export default {

        components: {
            Panel
        },

        props: [
            'asset'
        ],

        computed: {
            asset_last_audit_date: function() {
                return dateFormat(this.asset.last_audit_date, 'm/d/yyyy')
            },

            asset_maintenance_length: function() {
                var today = new Date();
                var firstDay = new Date(this.asset.first_maintenance_record_date);
                var timeDiff = Math.abs(today.getMonth() - firstDay.getMonth() + (12 * (today.getFullYear() - firstDay.getFullYear())));

                var data = {};
                data.years = Math.floor(timeDiff / 12);
                data.months = timeDiff % 12;

                return data;
            }
        }

    }
</script>